<template>
  <div>
    <div class="waterfalls-flow">
      <ul ref="left" class="waterfalls-flow-left">
        <!-- 加载左侧列表 -->
        <li v-for="(item,index) in leftList" :key="index">
          <img :src="item.coverImgUrl" alt />
          <div>{{item.name}}</div>
        </li>
      </ul>
      <ul ref="right" class="waterfalls-flow-right">
        <!-- 加载you右侧列表 -->
        <li v-for="(item,index) in rightList" :key="index">
          <img :src="item.coverImgUrl" alt />
          <div>{{item.name}}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
// 瀑布流的组件
// 思路
// list是我们从后台请求过来的数据
// 请求数据放到生命周期函数里，可以在哪些生命周期函数里请求数据
// 初始化数据放在创建时期的生命周期函数
// 创建时期beforeCreate（这里获取不到data）,created,beforeMounte，mounted(想要初始化数据时一定要是能获取到data的时候获取)
// 运行时期beforeUpdate,updated
// 销毁时期beforeDestroy(清除计时器),destroyed
// 分为两个列表
// 左边的列表
// 右边列表
// 把请求到的list合理分配给左右两个列表
// 怎么分列表
// 哪个列表短，就把数据放到哪个列表里
// import{shopList}from "../api/shop-api"
export default {
  name: "WaterfallsFlow",
  data() {
    return {
      list: [],
      leftList: [],
      rightList: []
    };
  },
  created() {
    //数据初始化
    shopList(1,20).then(res => {
      console.log(res);
      if (res.data.code === 0) {
        //请求成功
        this.list = res.data.rows;
        // this.leftList = this.list;
        // this.rightList = this.list;
      } else {
        //请求失败，提示（可以在拦截器做统一的失败提示
      }
    });
  },
  methods: {
    //递归调用
    setList() {
      //判断分给左边和右边的条件
      //如果右边比左边低，放在右边，反之左边
      //涉及到获取左边和右边的高度//offsetHeight（算边框）,clientHeight（不算边框）,scrollHeight(滚动的那个东西的高度)
      // scropTop设置滚动条
      //  debugger
      // console.log(this.$refs.left.offsetHeight)

      if (this.list.length === 0) {
        //原始数据处理完了，代表递归调用结束了
        return;
      }
      //这时数据已经更新了，但是对应的界面没有渲染，因为vue的渲染是异步的，数据更新后，界面不会立即渲染
      //没办法获取到屏幕的高度，所以需要这样this.$nextTick(()
      let isleft;
      if (this.$refs.left.offsetHeight <= this.$refs.right.offsetHeight) {
        //当左边高度小于右边时，把元素放到左边，//pop()是取出的那个元素，用push放到左边
        isleft = true; //如果为true,代表新增的是左边，false代表新增的是右边
        // this.leftList.push(this.list.pop());pop是从列表最后一位取值，我们要从第一位取值
        this.leftList.push(this.list.shift());
        // shift(从第一个取值)，unshift（从第一个设置值）,pop（从最后一个取值） ,push（从最后一个添加值）
      } else {
        left = false;
        this.rightList.push(this.list.shift());
      }
      //递归调用
      // this.setList();
      this.$nextTick(() => {
        //这样就完成了界面的更新，可以获取高度了就
        // 等到图片加载后才能计算出来真实的高度，所以需要监听图片加载的事件
        //图片什么时候加载完，onload事件  加载完成的事件
        //需要获取到图片的dom对象，需要判断获取左边的还是右边的
        //if (isleft) {
          //取这个数组里最新的一项
          //this.$refs.left.children[this.leftList.length - 1].firstElementChild.onload = () => {
            //this.leftList.length是长度，-1就是最后一项了
           // this.setList();
         // }
           //this.$refs.left.children[this.leftList.length - 1].firstElementChild.onerror = () => {
           // this.setList();//图片加载失败时也可以实现
         // }
       // }else{
            //取这个数组里最新的一项
          //this.$refs.right.children[this.rightList.length - 1].firstElementChild.onload = () => {
            //this.leftList.length是长度，-1就是最后一项了
           // this.setList();
        //  }
         // this.$refs.right.children[this.rightList.length - 1].firstElementChild.onerror = () => {
            //this.leftList.length是长度，-1就是最后一项了
           // this.setList();
         // }
        //}
        //如果imgDomObj=isleft，就执行this.$refs.left.children[this.leftList.length - 1].firstElementChild
        //反之，执行this.$refs.right.children[this.rightList.length - 1].firstElementChild
        let imgDomObj=isleft?this.$refs.left.children[this.leftList.length - 1].firstElementChild :  this.$refs.right.children[this.rightList.length - 1].firstElementChild
        imgDomObj.onload=imgDomObj.onerror=()=>{
            this.setList();
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.Waterfalls-flow {
  > ul {
    float: left;
    width: 50%;
    padding: 5px;
    box-sizing: border-box;
    // border: 10px solid purple;
    img {
      width: 100%;
    }
    li {
      padding: 10px 0;
    }
  }
  //less里，&相当于父级元素
  // .Waterfalls-flow-left  =  &-left
  &-left {
  }
  &-right {
  }
}
</style>